<template>
	<view class="">
		<view class="">
			<view class="flex padding-tb radius padding-lr-sm bg" @click="goMsg">
				<view>
					<image style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"
						src="../../static/images/msg/msg.png"></image>
				</view>
				<view class="flex-sub margin-left-sm">
					<view class="flex justify-between">
						<view class="text-white">{{msgList.title?msgList.title: '系统消息'}}</view>
						<view v-if="messageCount>0"
							style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
							{{messageCount}}
						</view>
					</view>
					<view>
						<view class="text-grey">{{msgList.content?msgList.content:'暂无消息'}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="margin-top-sm" @tap="goChat">
			<view class="flex padding-tb radius padding-lr-sm bg">
				<view>
					<image style="width: 80rpx;height: 80rpx;border-radius: 80rpx;" src="../../static/logo.png"></image>
				</view>
				<view class="flex-sub margin-left-sm">
					<view class="flex justify-between">
						<view class="text-white">在线客服</view>
						<view v-if="adminmessageCount>0"
							style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
							{{adminmessageCount}}
						</view>
					</view>
					<view style="margin-top: 10rpx;">
						<view class="text-grey">有问题请联系在线客服~</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="chatList.length" class="margin-top-sm  content ">
			<view class="radius padding-lr-sm bg" style="margin-top: 4rpx;" @click="goIM(item)"
				v-for="(item,index) in chatList" :key='index'>
				<view class="flex padding-tb " v-if="userId == item.userId">
					<view>
						<u-image shape="circle" width='80rpx' height="80rpx" :src="item.byAvatar"></u-image>
					</view>
					<view class="flex-sub margin-left-sm">
						<view class="flex justify-between">
							<view class="text-white">{{item.byUserName}}</view>
							<view class="text-grey">{{item.messageTime}}</view>
						</view>
						<view class="flex justify-between">
							<!-- <view class="text-grey">{{ item.messageType == 1? item.content : '[图片]'}}</view> -->
							<view class="text-grey" v-if="item.messageType == 1">{{ item.content }}</view>
							<view class="text-grey" v-if="item.messageType == 2">[图片]</view>
							<view class="text-grey" v-if="item.messageType == 3">[语音]</view>
							<view class="text-grey" v-if="item.messageType == 4">[表情]</view>
							<view class="text-grey" v-if="item.messageType == 5">[地图]</view>
							<view class="text-grey" v-if="item.messageType == 6">[订单]</view>
							<view class="text-grey" v-if="item.messageType == 7">[服务]</view>
							<view v-if="item.contentCount"
								style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
								{{item.contentCount}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex padding-tb" v-else>
					<view>
						<u-image shape="circle" width='80rpx' height="80rpx" :src="item.avatar"></u-image>
					</view>
					<view class="flex-sub margin-left-sm">
						<view class="flex justify-between">
							<view class="text-white">{{item.userName}}</view>
							<view class="text-grey">{{item.messageTime}}</view>
						</view>
						<view class="flex justify-between">
							<!-- <view class="text-grey">{{ item.messageType == 1? item.content : '[图片]'}}</view> -->
							<view class="text-grey" v-if="item.messageType == 1">{{ item.content }}</view>
							<view class="text-grey" v-if="item.messageType == 2">[图片]</view>
							<view class="text-grey" v-if="item.messageType == 3">[语音]</view>
							<view class="text-grey" v-if="item.messageType == 4">[表情]</view>
							<view class="text-grey" v-if="item.messageType == 5">[地图]</view>
							<view class="text-grey" v-if="item.messageType == 6">[订单]</view>
							<view class="text-grey" v-if="item.messageType == 7">[服务]</view>
							<view v-if="item.contentCount"
								style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
								{{item.contentCount}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<empty v-if="chatList.length==0" content='暂无消息'></empty>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				page: 1,
				limit: 100,
				chatList: [],
				userId: '',
				msgList:{
					title:'',
					content:'',
				},
				timer: '',
				messageCount: 0,
				adminmessageCount: 0,
				arr: []
			}
		},
		onLoad() {
			let that = this

			that.$Request.getT('/app/common/type/261').then(res => { //商家私聊消息通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/app/common/type/313').then(res => { //订单状态通知 313
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
		},
		onShow() {
			let that = this
			that.userId = uni.getStorageSync('userId')
			if (that.userId) {
				that.getChatList()
				that.getMsgList()
				that.timer = setInterval(function() {
					that.getChatList()
					that.getMsgList()
					that.$nextTick(function() {
						that.messageCount = uni.getStorageSync('messageCount')
						that.adminmessageCount = uni.getStorageSync('adminmessageCount')
					})

				}, 3000)

			} else {
				that.chatList = []
				that.msgList = {
					title:'',
					content:'',
				}
				if(!this.userId){
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							} else if (res.cancel) {
							}
						}
					})
					return;
				}
			}
		},
		onHide() {
			clearTimeout(this.timer)
		},
		methods: {

			// 在线客服
			goChat() {
				if(!this.userId){
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							} else if (res.cancel) {
							}
						}
					})
					return;
				}
				let that = this
				let kefu = this.$queue.getData('kefu'); // 用户端联系方式 1 手机号 2企业微信 3 客服二维码  4在线客服
				let kefuPhone = this.$queue.getData('kefuPhone');
				if (kefu == 1) {
					uni.makePhoneCall({
						phoneNumber: kefuPhone //仅为示例
					});
				} else if (kefu == 3) { //客服二维码
					uni.navigateTo({
						url: '/my/setting/customer'
					});
				} else if (kefu == 2) {
					// #ifdef MP-WEIXIN
					try {
						wx.openCustomerServiceChat({
							extInfo: {
								url: that.$queue.getData('kefuUrl')
							},
							corpId: that.$queue.getData('kefuAppId'),
							success(res) {},
							fail(res) {
								console.error(res)
							}
						})
					} catch (error) {
						console.error("catchcatch" + error)
						uni.showToast({
							title: '请更新至微信最新版本'
						});
					}
					// #endif
					// #ifndef MP-WEIXIN
					let url = that.$queue.getData('kefuUrl');
					if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/index/webView?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif
					}
					// #endif

				} else if (kefu == 4) {
					let token = that.$queue.getData('token');
					if (token) {
						// #ifdef MP-WEIXIN
						if (uni.getStorageSync('sendMsg')) {
							wx.requestSubscribeMessage({
								tmplIds: that.arr,
								success(re) {
									var datas = JSON.stringify(re);
									if (datas.indexOf("accept") != -1) {
										// console.log(re)
									}
								},
								fail: (res) => {
									// console.log(res)
								}
							})
						}
						// #endif
						uni.navigateTo({
							url: '/my/setting/chat'
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '您还未登录,请先登录',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateTo({
										url: '/pages/public/login'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}
				}
			},
			getChatList() {

				this.$Request.get("/app/chat/selectChatConversationPage", {
					page: this.page,
					limit: this.limit,
					userType: 3
				}).then(res => {
					if (res.code == 0) {
						this.chatList = res.data.list
					}
				});
			},
			getMsgList() {
				this.$Request.get("/app/message/selectMessageByUserIdLimit1?userType=3").then(res => {
					if (res.code == 0) {
						if (res.data.list) {
							this.msgList = res.data.list[0]
						}
					}
				});
			},
			goIM(e) {
				let userId = this.$queue.getData('userId');
				let byNickName = ''
				// console.log(e.byUserId,userId,'----------',e.byUserId == userId, e.userId,e.userName)
				// return
				if (e.byUserId == userId) {
					userId = e.userId
					byNickName = e.userName
				} else {
					userId = e.byUserId
					byNickName = e.byUserName
				}
				let token = this.$queue.getData('token');
				if (token) {
					// #ifdef MP-WEIXIN
					if (uni.getStorageSync('sendMsg')) {
						wx.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									// console.log(re)
								}
							},
							fail: (res) => {
								// console.log(res)
							}
						})
					}
					// #endif
					uni.navigateTo({
						url: '/pages/msg/chat?chatConversationId=' + e.chatConversationId + '&byUserId=' + userId +
							'&byNickName=' + byNickName
					})
				} else {
					this.goLoginInfo();
				}
			},
			//统一登录跳转
			goLoginInfo() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			goMsg() {
				if(!this.userId){
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							} else if (res.cancel) {
							}
						}
					})
					return;
				}
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								// console.log(re)
							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
				}
				// #endif
				this.messageCount = 0
				uni.navigateTo({
					url: '/pages/msg/message'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.bg {
		background: #FFFFFF;
	}
</style>